<template>
  <div>
    <div>
      <el-button type="success" @click="changeInfo">
        设为已归
      </el-button>
      <el-button type="success" @click="openDialog">
        新增晚归
        <el-icon>
          <Plus/>
        </el-icon>
      </el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="Id" fit/>
      <el-table-column prop="number" label="宿舍号" fit/>
      <el-table-column prop="name" label="姓名" fit/>
      <el-table-column prop="phone" label="电话" width="200" fit/>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination layout="prev, pager, next" :total="total"/>
    </div>
    <div>
      <Add :get-dialog="addDialog" @close="close()"></Add>
      <Update :get-dialog="updateDialog" @close="close()"></Update>
    </div>
  </div>
</template>

<script>

import {Plus, Position, Close} from "@element-plus/icons";
import Add from "@/components/stay/add";
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "table",
  components: {
    Add,
    Plus, Position, Close
  },
  props: {
    search: {
      type: Object,
      required: true
    }
  },
  watch: {
    'search.number': {
      handler(val) {
        this.form.number = val
        console.log(val)
        this.getStayList()
      },
      deep: true
    }
  },
  data() {
    return {
      addDialog: false,
      updateDialog: false,
      form: {
        num: null,
      },
      total: 0,
      tableData: [],
      ids: []
    }
  },
  methods: {
    openDialog() {
      this.addDialog = true
    },
    getStayList() {
      let data = this.form
      axios({
        url: "http://localhost:8888/stay/list",
        method: "post",
        data: data
      }).then(res => {
        if (res.status == 200) {
          this.tableData = res.data
        }
      })
    },
    changeInfo() {
      axios({
        url: "http://localhost:8888/stay/delete/" + this.ids,
        method: "delete"
      }).then(res => {
        if (res.data) {
          ElMessage({
            message: "已设为已归!",
            type: "success"
          })
        } else {
          ElMessage({
            message: "设置失败",
            type: "warning"
          })
        }
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    openAddDialog() {
      this.addDialog = true
    },
    openUpdateDialog() {
      this.updateDialog = true
    },
    close(value) {
      this.addDialog = value
      this.updateDialog = value
    }
  },
  mounted() {
    this.getStayList()
  }
}
</script>

<style scoped>

.example-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}

</style>